@import '@/assets/scss/custom-colors.scss';

// Override boostrap sass variables
$secondary: #ced4da !default;
$font-family-sans-serif: 'Libre Franklin', sans-serif !default;
$link-hover-decoration: none;

$theme-colors: (
  'dark-blue': $dark-blue,
);

$pagination-hover-bg: $yellow;
$navbar-dark-color: $white;
$navbar-dark-hover-color: $white;
$dropdown-link-hover-bg: $yellow;

@import '~bootstrap';
@import '~bootstrap-vue';

// Highlight the text of links on a page when hovered
a:hover {
  background-color: $yellow;
  color: $black;
}

// Set the background hover color on the links in the page header to
// be a more muted yellow
a.nav-link:hover {
  background-color: rgba($yellow, 0.2);
}

// Turn off hover-over coloring on the image in the header
a.navbar-brand:hover {
  background-color: rgba(0, 0, 0, 0);
}

a.nav-link{
  font-size: 1.25em;
}
// Custom button styling

.btn-outline-warning {
  color: darken($yellow, 25);
}

.btn-outline-primary {
  color: darken($primary, 15);
}

.btn-outline-danger {
  color: darken($danger, 25);
}

.btn-outline-secondary {
  color: darken($secondary, 40);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: rgba($yellow, 0.5);
  border-color: darken($yellow, 20);
  color: $black;
}

// General styling

html {
  position: relative;
  background-color: $white;
  font-size: 0.85em;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0.1em 0;
}

.small {
  font-size: 70%;
}
